<template>
  <div class="all-order-graph">
    <div class="newest-info">
      <h2>最新点餐消息———{{newDateTimeInfo}}</h2>
      <h3>总计</h3>
      <Table
        :width="500"
        :loading="newestLoadingTotal"
        :columns="newestColumnsPerType"
        :data="newestDataPerType">
      </Table>
      <h3>详情</h3>
      <Button
        class="go-detail"
        type="primary"
        @click="showNewestData=!showNewestData"
      >{{showNewestData?'查看详情':'收起详情'}}
      </Button>
      <transition name="fade">
        <Table
          v-show="!showNewestData"
          :width="500"
          :loading="newestLoadingTotal"
          :columns="columnsTotal"
          :data="newestDataTotal">
        </Table>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        weeks: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
        AmPm: ['上午', '下午'],
        newestColumnsPerType: [{title: '种类', key: 'orderType'}, {title: '数量', key: 'num'}],
        newestDataPerType: [],
        newestDataTotal: [],
        newestLoadingTotal: false,
        columnsTotal: [{title: '姓名', key: 'name'}, {title: '种类', key: 'orderType'},
          {title: '时间', key: 'time'}, {
            title: '备注',
            key: 'suggestContent'
          },],
        showNewestData: true
      }
    },
    computed: {
      newDateTimeInfo() {
        let date = new Date(),
          year = date.getFullYear(), mouth = date.getMonth() + 1, day = date.getDate(), week = date.getDay(),
          hour = date.getHours();
        return `${year}-${mouth}-${day}  ${this.weeks[week]} ${hour <= 12 ? this.AmPm[0] : this.AmPm[1]}`
      }
    },
    methods: {
      getNewestAllOrderLists() {
        let date = new Date,
          data = {
            startTime: `${date.getFullYear()}${('0' + (date.getMonth() + 1)).slice(-2)}${('0' + date.getDate()).slice(-2)}`,
            endTime: `${date.getFullYear()}${('0' + (date.getMonth() + 1)).slice(-2)}${('0' + date.getDate()).slice(-2)}`,
            isAM: date.getHours() < 13 ? 0 : 1, // 0是上午 1是下午
          };
        this.newestLoadingTotal = true;
        this.$axios.post(this.$store.getters.getUrl('getAllNewestOrderInfo'), data).then(res => {
            this.newestLoadingTotal = false;
            if (res.data.error_code === 0) {
              this.newestDataTotal = res.data.data;
              this.newestDataPerType = this.handleNewestTotalData(this.newestDataTotal)['resultPerType'];

              this.newestDataTotal.forEach(item => {
                item['time'] = this.formatTime(item['time'])
              })
            } else {
              this.$Message.error({
                content: res.data.msg
              });
            }
          }
        ).catch(() => {
          this.newestLoadingTotal = false;
          this.$Message.error({
            content: '网络不好，请刷新重试！'
          });
        })
      },
      handleNewestTotalData(newestDataTotal) {
        let result = {}, resultPerType = [];
        newestDataTotal.forEach(item => {
          if (!result[item['orderType']]) {
            result[item['orderType']] = [];
            result[item['orderType']].push(item);
          } else {
            result[item['orderType']].push(item);
          }
        });

        Object.keys(result).forEach(elem => {
          resultPerType.push({
            orderType: elem,
            num: result[elem].length
          })
        });

        return {result, resultPerType}
      },
      formatTime(timeString) {
        let temp = new Date(timeString);
        return `${temp.getFullYear()}年${temp.getMonth() + 1}月${temp.getDate()}日 ${temp.getHours()}:${temp.getMinutes()}:${temp.getSeconds()}`;
      }
    },
    created() {
      this.getNewestAllOrderLists()
    },
    mounted() {
      this.$store.dispatch('setBreadcrumbInfo', [{name: '点餐'},
        {name: '报表详情', routeName: 'GraphDetail'}])
    }
  }
</script>

<style lang='less' type='text/less' scoped>
  .all-order-graph {
    min-height: 800px;
    padding: 0 24px 24px;
    background-color: #fff;
    h2 {
      height: 60px;
      line-height: 60px;
      margin-bottom: 20px;
      border-bottom: 1px #ddd dashed;
    }
    h3 {
      height: 40px;
      line-height: 40px;
    }
    .go-detail {
      margin: 10px 0 20px;
    }
  }
</style>
